<template>
	<a-layout-content
			style="flex: 0 0 1270px;min-width: 1270px;max-width: 1270px;width: 1270px;position: relative;left: 15px;background: #ffffff !important;">
		<right-top icon="19.png" text="事件详情">
		</right-top>
		<div class="right-content">
			<a-form-model :model="eventInfo" layout="inline" style="margin-left: 13%">
				<a-row style="margin-top: 20px;">
					<a-col :span="15">
						<a-form-model-item label="事件名称" :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%">
							<a-input class="inputBox" style="marign-left:10px" v-model="eventInfo.ruleName" readOnly="true"/>
							/>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="padding-left: 3.9%;">
					<a-col :span="6" style="padding-left : -1%">
						<a-form-model-item label="事件分类" :label-col="{span:4}" :wrapper-col="{span:17}" style="width: 100%;">
							<a-select placeholder="一级分类" style="" v-model="eventInfo.oneEventType" disabled>
								<a-select-option v-for="item in oneLevel" :key="item.id">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>
					<a-col :span="5">
						<a-form-model-item label="" :label-col="{span:0}" :wrapper-col="{span:23}" style="width: 100%;">
							<a-select placeholder="二级分类" style="" v-model="eventInfo.twoEventType" disabled>
								<a-select-option v-for="item in twoLevel" :key="item.id">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>
					<a-col :span="5">
						<a-form-model-item label="" :label-col="{span:0}" :wrapper-col="{span:23}" style="width: 100%;">
							<a-select placeholder="三级分类" style="" v-model="eventInfo.threeEventType" disabled>
								<a-select-option v-for="item in threeLevel" :key="item.id">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row>

					<a-col :span="3" style="">
						<span style="margin-left: -10px;color: #0b1026;">通用监测规则名称:</span>
					</a-col>
					<a-col :span="17" style="margin-left: -2%;">
						<span style="margin-left:10px">{{ targetData }}</span>
					</a-col>
				</a-row>
				<a-row style="">
					<a-col :span="15">
						<a-form-model-item label="可见性" :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%">
							<a-radio-group name="radioGroup" style="margin-left:10px" disabled v-model="eventInfo.isShow">
								<a-radio :value="1">
									系统
								</a-radio>
								<a-radio :value="2">
									仅自己
								</a-radio>
							</a-radio-group>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="margin-left: 0.5%">
					<a-col :span="15" class="noborder">
						<a-form-item :label-col="{span:4}"
						             :wrapper-col="{span:18}"
						             label="媒体类型">
							<a-checkbox-group name="contractClass" default-value="['微博','新闻']" v-decorator="['contractClass']"
							                  style="width: 200%;margin-top: -2%" disabled v-model="eventInfo.mediaType">
								<a-row style="margin-left:10px">
									<a-checkbox-group v-model="eventInfo.mediaType" disabled>
										<a-checkbox v-if="i<8" :value="item" v-for="(item,i) in media_type">
											{{ media_type[i] }}
										</a-checkbox>
									</a-checkbox-group>
								</a-row>
								<a-row style="position: relative;top: 0px;margin-left: -8%;" v-show="media_type.length >= 8">
									<a-col :span="21" :push="2">
										<a-checkbox-group disabled v-model="eventInfo.mediaType">
											<a-checkbox v-if="i>=8" :value="item" v-for="(item,i) in media_type">
												{{ media_type[i] }}
											</a-checkbox>
										</a-checkbox-group>
									</a-col>
								</a-row>
							</a-checkbox-group>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row style="margin-left:-60px;margin-top: 3%;">
					<a-col :span="24">
						<a-form-model-item label="全文" :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 90%">

							<a-textarea style="margin-left:10px" placeholder="" :rows="4" :auto-size="{ minRows: 4, maxRows: 4 }"
							            v-model="eventInfo.content" readOnly="true"/>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="margin-top: 6%;margin-left:0px">
					<a-col :span="23" style="margin-left:-60px">
						<a-form-model-item label="标题" :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%">
							<a-input style="width:779px;margin-left:10px" readOnly="true" v-model="eventInfo.title"></a-input>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="23" style="margin-left:-60px">
						<a-form-model-item label="关键词" :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%">
							<a-input style="width:779px;margin-left:10px" readOnly="true" v-model="eventInfo.keyword"></a-input>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="margin-top: 0%">
					<a-col :span="15">
						<a-form-model-item label="倾向性" :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%;">
							<a-select style="margin-left:10px" v-model="eventInfo.emotionalPolarity" disabled>
								<a-select-option :value="1">正面</a-select-option>
								<a-select-option :value="2">中性</a-select-option>
								<a-select-option :value="3">负面</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="margin-top: 0%">
					<a-col :span="8" style="margin-left:-37px">
						<a-form-model-item label="文章级别" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%;">
							<a-select style="margin-left:10px" v-model="eventInfo.levelInference" disabled>
								<a-select-option :value="3">重要级别</a-select-option>
								<a-select-option :value="2">中等级别</a-select-option>
								<a-select-option :value="1">一般级别</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>
					<a-col :span="3" style="margin-left: 31px;">
						<span style="margin-left: 32%;color: black">发布日期：</span>
					</a-col>
					<a-col :span="4" style="margin-left: -25px">
						<a-date-picker show-time style="width:200px" v-model="eventInfo.monitorDateStart" disabled>
							<template slot="renderExtraFooter">
							</template>
						</a-date-picker>
					</a-col>
					<a-col :span="1">
						<span style="font-size: 20px;margin-left:50%">~</span>
					</a-col>
					<a-col :span="4" style="margin-left:-5px">
						<a-date-picker show-time style="width:200px" v-model="eventInfo.monitorDateEnd" disabled>
							<template slot="renderExtraFooter">
							</template>
						</a-date-picker>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="8" style="margin-left:47px">
						<a-form-model-item label="发布媒体" :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%">
							<a-input style="width:330px;margin-left:8px" v-model="eventInfo.informationSources"
							         readOnly="true"></a-input>
						</a-form-model-item>
					</a-col>
					<a-col :span="8" style="margin-left:84px">
						<a-form-model-item label="作者" :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%">
							<a-input style="width:330px" v-model="eventInfo.author" readOnly="true"></a-input>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="margin-left: 4%">
					<a-col :span="20" style="text-align: center">
						<a-button style="margin-right: 10px;color: black" @click="goHomePage">返回</a-button>
					</a-col>
				</a-row>
			</a-form-model>
		</div>
	</a-layout-content>
</template>

<script>

import left from './left/index'
import rightTop from './right/top'

import {detail, getOneEventType, getThreeEventType, getTwoEventType} from '@/api/eventAnalyze/eventAnalyze'
import {getMediaTypeList} from '@/api/eventAnalyze/eventAnalyzeResults'
import {ruleNameList} from "@/api/generalDetection/generalDetetion";

export default {
	name: "eventAnalyzecreateinfo",
	components: {
		left,
		rightTop
	},
	data() {
		return {
			oneLevel: [],//获取一级分类
			media_type: [],//获取媒体类型
			twoLevel: [],//获取二级分类
			threeLevel: [],//获取三级分类
			targetData: '',//获取通用检测规则名称
			targetKeys: [],//获取通用检测规则id
			labelCol: {span: 10},
			wrapperCol: {span: 14},
			eventInfo: {//获取详情数据
				ruleName: '',
				oneEventType: undefined,
				twoEventType: undefined,
				threeEventType: undefined,
				gmCommandId: '',
				mediaType: [],
				content: '',
				title: '',
				keyword: '',
				emotionalPolarity: undefined,
				levelInference: undefined,
				monitorDateStart: undefined,
				monitorDateEnd: undefined,
				informationSources: undefined,
				author: undefined,
				isShow: 1,
			},
		}
	},
	props: {
		eventId: {
			type: Object,
		},
		parent: {
			type: Object,
		}
	},
	methods: {

		// 返回按钮
		goHomePage() {
			this.parent.if_info = false;
			this.parent.wlzp = true;
			this.parent.commandId2 = this.eventId.commandId;
			this.parent.eventName = this.eventId.name;
		},


		// 调用接口
		init() {

			// 查询规则详情
			detail({
				id: this.eventId.id
			}).then(res => {
				this.eventInfo = res.data;
				this.targetKeys = res.data.gmCommandId.split("-0;");
				let a = this.targetKeys[this.targetKeys.length - 1].substring(0, 13)
				this.targetKeys[this.targetKeys.length - 1] = a;
				// 获取二级分类
				if (this.eventInfo.oneEventType != undefined) {
					getTwoEventType({
						oneEventType: this.eventInfo.oneEventType,
					}).then(res1 => {
						this.twoLevel = res1.data;
					})

				}

				// 获取三级分类
				if (this.eventInfo.twoEventType != undefined) {
					getThreeEventType({
						twoEventType: this.eventInfo.twoEventType,
					}).then(res2 => {
						this.threeLevel = res2.data;
					})
				}


				// 获取通用监测规则名称
				ruleNameList({}).then(res3 => {
					for (let i = 0; i < res3.data.length; i++) {
						for (let k = 0; k < this.targetKeys.length; k++) {
							if (res3.data[i].commandId == this.targetKeys[k]) {
								this.targetData += "  " + res3.data[i].ruleName + ",   ";
							}
						}
					}
				})

			});


			// 获取一级分类
			getOneEventType().then(res => {
				this.oneLevel = res.data;
			});
		}


	},
	mounted() {
		// 获取媒体类型
		getMediaTypeList().then(res => {
			let samples = res.data;
			for (let i = 0; i < samples.length; i++) {
				this.media_type.push(samples[i].mediaName)
			}
		});

		this.init();
	},
}
</script>

<style scoped lang="scss">
/deep/ .check_transfer .ant-checkbox {
	display: none !important;
}

/deep/ .ant-transfer-operation .ant-btn {
	/* background-color:white*/
}

/deep/ .ant-transfer-operation .ant-btn .anticon {
	display: none
}

.inputBox {
	height: 40px;
}

/deep/ .ant-select-selection--single {
	height: 40px;
}

/deep/ .ant-select-selection__rendered {
	height: 35px;
}


.right-content {
	margin-bottom: 40px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}

.listv2-root {
	width: 100%;
	height: 100%;
	position: relative;
}

/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > span {
	color: black;
	font-size: 13px;
	cursor: pointer;
}
</style>
